import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();

const k = innerWidth / innerHeight,
      s = 400, // 三维场景显示范围控制系数，系数越大，显示的范围越大
      camear = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
/**
 * 左右边界的距离与上下边界的距离比值与画布的渲染窗口的宽高比例要一致，否则三维模型的显示效果会被单方向不等比例拉伸
 * 宽度width、高度height越大，三维模型顶点的位置坐标就会越大，超出可视区域的网格模型就会被剪裁掉，
 * 不会再显示在屏幕上，大家还可以看到参数left与right、参数top与bottom互为相反数，这样做的目的是lookAt指向的对象能够显示在canvas画布的中间位置。
 */
  
camera.position.set(400, 400, 400);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xaaaaaa);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
new OrbitControls(camear, renderer.domElement);
(function render() {
  renderer.render(scene, camear);
  requestAnimationFrame(render);
})();